

import React, { useEffect,useRef,useState } from 'react';
import {Row,Col} from "antd"
import { ajax } from '../../api';
import moment from "moment"


export const Preview =({location,history})=> {
        const [detail,setDetail] = useState({})
        const [leixing,setLeixing] = useState("")
        const [xifen,setXifen] = useState("")

        useEffect(()=>{
            ajax.getchukuone({
                aid:new URLSearchParams(location.search).get("aid")
            }).then(res=>{
                console.log(res)
                if(res.code==200){
                    setDetail(res.result)
                    setLeixing(res.result.peijian.split("=")[0])
                    setXifen(res.result.peijian.split("=")[1])
                }
            })
        },[])

        return (
            <div style={{paddingTop:30}}>
                <Row>
                    <Col span={18} offset={3}>
                        <div style={{border:"1px solid #000", padding:5}}>
                            <h2 style={{textAlign:"center",fontSize:24,fontWeight:600,borderBottom:"2px dotted #000",paddingBottom:5,letterSpacing:5}}>出库详情</h2>
                            <div style={{ padding:"0 30px"}}>
                                <div style={{display:"flex",justifyContent:"space-between",fontSize:16,marginBottom:10}}>
                                    <div>{leixing}:</div>
                                    <div>{xifen}</div>
                                </div>
                                <div style={{display:"flex",justifyContent:"space-between",fontSize:16,marginBottom:10}}>
                                    <div>申请时间:</div>
                                    <div>{moment(detail.time).format('YYYY-MM-DD HH:mm:ss')}</div>
                                </div>
                                <div style={{display:"flex",justifyContent:"space-between",fontSize:16,marginBottom:10}}>
                                    <div>申请人姓名:</div>
                                    <div>{detail.username}</div>
                                </div>
                                <div style={{display:"flex",justifyContent:"space-between",fontSize:16,marginBottom:10}}>
                                    <div>申请人电话:</div>
                                    <div>{detail.phone}</div>
                                </div>
                                <div style={{display:"flex",justifyContent:"space-between",fontSize:16,marginBottom:10}}>
                                    <div>出库数量:</div>
                                    <div>{detail.content}</div>
                                </div>
                                <div style={{display:"flex",justifyContent:"space-between",fontSize:16,marginBottom:10}}>
                                    <div>出库单价:</div>
                                    <div>{detail.money}</div>
                                </div>
                                <div style={{display:"flex",justifyContent:"space-between",fontSize:16,marginBottom:10}}>
                                    <div>出库总价:</div>
                                    <div>{detail.dbmoney}</div>
                                </div>
                                <div style={{display:"flex",justifyContent:"space-between",fontSize:16,marginBottom:10}}>
                                    <div>出库用途:</div>
                                    <div dangerouslySetInnerHTML={{__html:detail.neirong}}></div>
                                </div>
                                <div style={{display:"flex",justifyContent:"space-between",fontSize:16,marginBottom:10}}>
                                    <div>是否出库:</div>
                                    <div>{detail.isTest?"已出库":"未出库"}</div>
                                </div>
                                {
                                    detail.isTest?<img src={require("../../assets/images/true.jpg").default} style={{width:150,height:150,margin:"auto"}}/>:
                                    <img src={require("../../assets/images/deng.jpg").default} style={{width:150,height:150,margin:"auto"}}/>
                                }
                            </div>
                        </div>
                    </Col>
                </Row>
            </div>
        );
}

